<!DOCTYPE html>
<html>
<head>
<style>
	* { margin:0; padding:0; font:18px 'Trebuchet MS'; }
	td { background:wheat; height:30px; }
	div { font-size:12px; }
</style>
<script>
	function $(id) { return document.getElementById(id); }
	
	window.onload = function () {
		$('info1').innerHTML += $('thead').offsetHeight;
		$('info2').innerHTML += $('tbody').offsetHeight;
		$('info3').innerHTML += $('tbody').getBoundingClientRect().top - $('thead').getBoundingClientRect().bottom;
	}
</script>
</head>
<body>
<table cellspacing="30" style="width:200px; border:5px solid black;">
	<thead id="thead">
		<tr>
			<td>THEAD</td>
		</tr>
	</thead>
	<tbody id="tbody">
		<tr>
			<td>TBODY</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<td>TBODY</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>TFOOT</td>
		</tr>
	</tfoot>
</table>
<div id="info1">Height of THEAD: </div>
<div id="info2">Height of TBODY: </div>
<div id="info3">Distance between THEAD and TBODY: </div>
</body>
</html>